<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getBiaojideApi,
		tijiaoYufaApi,
		getFuxiApi,
		tijiaojiluapi
	} from '/api/request.js';
	const props = defineProps({});
	onMounted(() => {});
	const platform = ref({});
	const goback = async () => {
		uni.navigateBack();
	};
	const tijiao = async () => {
		console.log(query.value.id);
		if (query.value.wai) {
			let res = await tijiaojiluapi({
				learning_id: query.value.id
			})
			center.value.close()
			uni.showToast({
				title: res.msg,
				icon: 'none',
				duration: 1200
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1200)
			return
		}
		let res = await tijiaoYufaApi({
			gk_id: query.value.id,
			correct_word_id: query.value.hui,
			error_word_id: query.value.word_ids,
		})
		center.value.close()
		uni.showToast({
			title: res.msg,
			icon: 'none',
			duration: 1200
		})
		setTimeout(() => {
			uni.navigateBack()
		}, 1200)
	};
	const query = ref({
		word_ids: '',
		hui: '',
		index: 0
	});
	const list = ref(null);
	onLoad(async (e) => {
		query.value.word_ids = e.buhuide;
		query.value.hui = e.huide;
		query.value.id = e.id;
		if (e.wai) {
			query.value.wai = e.wai
		}
	});
	const getList = async () => {
		if (query.value.wai) {
			let res = await getFuxiApi({
				learning_id: query.value.id
			})
			console.log(res);
			query.value.haode = res.data.correct
			query.value.error = res.data.error
			query.value.gk_id = res.data.gk_id
			query.value.id = res.data.id
			list.value = res.data.error
			return
		}
		try {
			let res = await getBiaojideApi({
				grammar_ids: query.value.word_ids
			});
			console.log(res);
			list.value = res.data
		} catch (error) {
			console.log(error);
			//TODO handle the exception
		}
	}
	onShow(() => {
		platform.value = uni.getStorageSync('platform');
		uni.showLoading()
		getList().finally(() => {
			uni.hideLoading()
		})
	});
	const stautss = ref({
		id: '',
		num: 0
	})
	const all = ref(new Set())
	const play = (id) => {
		if (stautss.value.id == id) {
			if (stautss.value.num === 1) {
				stautss.value.num = 2;
			} else if (stautss.value.num === 2) {
				stautss.value.num = 3;
				if (query.value.wai && select.value == 0) {
					all.value.add(id)
				}
			} else {
				stautss.value.num = 1;
			}
			console.log(stautss.value);
		} else {
			stautss.value.id = id;
			stautss.value.num = 1;
		}
	};
	const returnClass = (id) => {
		if (id == stautss.value.id && stautss.value.num == 1) return 'active'
		if (id == stautss.value.id && stautss.value.num == 2) return 'default'
		if (id == stautss.value.id && stautss.value.num == 2) return 'kong'
	}
	const btnGroup = ref([{
		name: '题库',
		action: '1',
		style: {
			fontSize: '32rpx',
			width: '144rpx',
			height: '148rpx',
			color: '#fff',
			bgColor: '#FF7C42'
		}
	}]);
	const selectIndex = ref('')
	const changeSelect = (e) => {
		selectIndex.value = e;
	};
	const onclick = (e) => {
		let index = query.value.index * 5 + e.index;
		if (query.value.wai) {
			uni.navigateTo({
				url: '/pages/yufa/components/tiku?id=' + query.value.id + '&buhuide=' +
					query.value.id + '&gk_id=' + query.value.gk_id
			})
		} else {
			uni.navigateTo({
				url: '/pages/yufa/components/tiku?id=' + list.value[index].id + '&buhuide=' +
					query.value.word_ids + '&gk_id=' + query.value.id
			})
		}
	};
	const center = ref(null)
	const jieshu = () => {
		center.value.open('center')
	}
	const showVideo = () => {
		uni.navigateTo({
			url: `/pages/yufa/components/video?id=`
		})
	}
	const select = ref(0)
	const changeSelects = (e) => {
		selectIndex.value = null
		if (select.value == e) return
		select.value = e
		if (e == 0) {
			list.value = query.value.error
		} else {
			list.value = query.value.haode
			console.log(list.value);
		}
	}
</script>

<template>
	<view class="wrap " :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<view class="lefts uni-row">
				<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
				<view class="title"> 语句识记 </view>
			</view>
			<view class="rights uni-row">
				<view class="leftsss uni-row dayin" @click="showVideo"> 视频学习 </view>
				<view class="submit uni-row" @click="jieshu"> 结束训练 </view>
			</view>
		</view>
		<view class="menu-list uni-row" v-if="query.wai">
			<view class="item uni-row" v-for="(item, index) in ['练后汇总（x）', '未练汇总（✓）']" :key="index"
				:class="{ active: index == select }" @click="changeSelects(index)">
				{{ item }}
			</view>
		</view>
		<scroll-view scroll-y="true" class="body"
			:style="{ height: platform.gaodu - platform.dingbu - 96-(query.wai?116:0) + 'rpx' }">
			<view class="" style="height: 20rpx;" v-if="!query.wai" />
			<view class="item uni-row" v-for="(item,index) in list" :key="index" @click="play(item.id)"
				:class="returnClass(item.id)">
				<next-swipe-action :btnGroup="btnGroup" :index="index" @btnClick="onclick" :select="selectIndex"
					@changeSelect="changeSelect">
					<view class="nei uni-row">
						<view class="title">
							{{item.title}}
						</view>
						<view class="titles">
							{{item.words}}
						</view>
						<view class="titless">
							{{item.description}}
						</view>
					</view>
				</next-swipe-action>
			</view>
			<view class="" style="height: 20rpx;" />
		</scroll-view>
		<view class="nothing" v-if="list && list.length < 1">
			<image src="/static/img/nothing.png" class="img"></image>
			<view class="label"> 哎呀，这里什么内容都没有 </view>
		</view>
	</view>
	<uni-popup ref="center">
		<view class="wai">
			<view class="title"> 温馨提示 </view>
			<view class="label"> 确定要结束训练吗？ </view>
			<view class="footer uni-row">
				<view class="fou bt" @click="center.close()"> 否 </view>
				<view class="shi bt" @click="tijiao"> 是 </view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-left: 32rpx;
			}

			.leftsss {
				justify-content: center;
				width: 144rpx;
				height: 52rpx;
				font-size: 24rpx;
				color: #fff;
				background: #fa862c;
				border-radius: 8rpx;
			}

			.submit {
				font-size: 24rpx;
				color: #fff;
				background-color: #9561f3;
				justify-content: center;
				width: 144rpx;
				height: 52rpx;
				border-radius: 8rpx;
				margin-left: 32rpx;
			}
		}

		.menu-list {
			background-color: #fff;
			margin-bottom: 20rpx;

			.item {
				flex: 1;
				height: 96rpx;
				justify-content: center;
				font-size: 30rpx;
				color: #333333;
				border-bottom: 1rpx solid transparent;

				&.active {
					color: #9561f3;
					font-weight: 500;
					border-bottom: 1rpx solid #9561f3;
				}
			}
		}

		.body {
			padding: 0 28rpx;

			.item {
				align-items: center;
				height: 144rpx;
				background: #FFFFFF;
				margin-bottom: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				border-radius: 16rpx;
				overflow: hidden;

				.nei {
					padding: 0 28rpx;
					height: 144rpx;
				}

				.title {
					color: #B3B3B3;
				}

				.titles,
				.titless {
					display: none;
				}

				&.active {
					.title {
						display: none;
					}

					.titles {
						display: block;
					}
				}

				&.default {
					.title {
						display: none;
					}

					.title {
						display: none;
					}

					.titless {
						display: block;
					}
				}

				&:last-child {
					margin-bottom: 0;
				}

			}
		}
	}

	.wai {
		width: 606rpx;
		height: 378rpx;
		background: #f4eeff;
		border-radius: 64rpx;
		padding: 48rpx 96rpx;
		text-align: center;
		color: #333333;

		.title {
			font-size: 32rpx;
		}

		.label {
			font-size: 28rpx;
			margin: 36rpx 0 56rpx;
		}

		.footer {
			justify-content: space-between;

			.bt {
				width: 184rpx;
				height: 68rpx;
				font-size: 24rpx;
				line-height: 68rpx;
				border-radius: 36rpx;
			}

			.fou {
				color: #9561f3;
				border: 2rpx solid #9561f3;
			}

			.shi {
				background: #9561f3;
				color: #fff;
			}
		}
	}
</style>